<template>
  <div class="home">
    <header class="index-JMUSj_0">
      <div class="index-1DPx9_0">
        <van-icon name="location-o" />
        <span class="index-2uW_v_0">中原中路郑州市人民政府</span>
      </div>
    </header>
    <van-sticky>
      <div class="search">
        <van-search
          background="#0af"
          v-model="value"
          placeholder="请输入搜索关键词"
          @click="pathFlll"
        />
      </div>
    </van-sticky>
    <!-- 分类 -->
    <ul class="fenlei">
      <li v-for="item in fenlei" :key="item.id">
        <img :src="item.pic" alt="" />
        <p>{{ item.title }}</p>
      </li>
    </ul>
    <!-- 图片 -->
    <div class="index-1ECZ3_0">
      <section class="section">
        <div class="fl_ll">
          <h2>品质套餐</h2>
          <br />
          <span>搭配齐全吃得好</span><br /><br />

          <p>立即抢购></p></p>
        </div>
        <img
          src="https://cube.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?x-oss-process=image/format,webp/resize,w_282,h_188,m_fixed"
          alt=""
        />
      </section>
    </div>
    <p class="shoplist-title">——————  推荐商家   ——————</p>
    <van-card
    v-for="item in list" :key="item.id"
          :price="item.restaurant.distance"
          :title="item.restaurant.name"
          :thumb="item.restaurant.image_path"
/>

<div class="www"></div>
  </div>
</template>
<script>
import { getList,getShop } from "@/utils/api";
export default {
  data() {
    return {
      value: "",
      fenlei: [],
      list:[],
      listImg:[],
      str:'',
      filt:[]
    };
  },
  mounted() {
    getList().then((res) => {
      this.fenlei = res.data;
    });
    console.log(this.$route.query.val);
    getShop().then(res=>{
      if(this.$route.query.val==undefined){
          this.list=res.data.items
          this.list.filter(item=>{
            var str=item.restaurant.image_path
            var a=str.slice(0,1)
            var b=str.slice(1,3)
            var c=str.slice(3,str.length)
            // console.log(a,str);
            // console.log(c,str);
            var newStr=a+'/'+b+'/'+c
            // console.log(newStr);
            console.log(`https://cube.elemecdn.com/`+newStr+'.jpeg');

            return item.restaurant.image_path=`https://cube.elemecdn.com/`+newStr+'.jpeg'
          })












          

      }else{
        this.list=res.data.items.filter(item=>{
        return item.restaurant.name.includes(this.$route.query.val)
      })
      }
    });
    
  },
  methods: {
    pathFlll(){
      this.$router.push({name:'search'})
    }
  },
 
};

</script>
<style lang="scss" scoped>
.index-JMUSj_0 {
  width: 100%;
  height: 1rem;
  padding: 0.1rem;
  box-sizing: border-box;
  background-image: linear-gradient(90deg, #0af, #0085ff);
  .index-1DPx9_0 {
    width: 100%;
    height: 100%;
    padding: 0.1rem;
    box-sizing: border-box;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    color: white;
    display: flex;
    align-items: center;
    .index-2uW_v_0 {
      font-size: 0.453333rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.3rem;
    }
    .van-icon-location-o {
      font-size: 0.3rem;
    }
  }
}
.search {
  position: sticky;
  z-index: 999;
  top: 0;
  padding: 0.2rem 0.373333rem;
  padding: 2vw 3.733333vw;
  margin: -0.013333rem 0;
  margin: -0.133333vw 0;
  background-image: linear-gradient(90deg, #0af, #0085ff);
}
.fenlei {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  li {
    width: 20%;
    font-size: 0.24rem;
    text-align: center;
    img {
      width: 50px;
    }
  }
}
.index-1ECZ3_0 {
  width: 100%;
  height: 2.5rem;
  padding: 0.3rem;
  box-sizing: border-box;
  margin-top: 0.4rem;


  .section {
    width: 100%;
    height: 100%;
    background-color: rgb(236, 236, 236);
    display: flex;
    justify-content: space-around;
    align-items: center;
    .fl_ll {
      font-size: 0.3rem;
      h2 {
        font-weight: 600;
      }
      span {
        margin: 0.5rem 0;
        font-size: 0.2rem;
      }
      > p {
        font-size: 0.2rem;
        color: #af8260;
      }
    }
    img {
      width: 30%;
    }
  }
}
.shoplist-title{
  width: 100%;
  text-align: center;
  font-size: .3rem;
}
.www{
  width: 100%;
  height: 1rem;
}
</style>
